<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>流程设计器</title>
    <link rel="stylesheet" href="css/diagram-js.css"/>
    <link rel="stylesheet" href="vendor/bpmn-font/css/bpmn-embedded.css"/>
    <link rel="stylesheet" href="css/app.css"/>

    <link rel="stylesheet" href="/businessProcessManager/js/ele/index.css">
    <link rel="stylesheet" href="/businessProcessManager/css/style.css">
    <!-- 先引入 Vue -->
    <script src="/businessProcessManager/js/ele/vue.js"></script>
    <script src="/businessProcessManager/js/ele/vue-resource.js"></script>
    <script src="/businessProcessManager/js/ele/vue-router.js"></script>
    <!-- 引入组件库 -->
    <script src="/businessProcessManager/js/ele/index.js"></script>
    <script src="/businessProcessManager/js/jquery.min.js"></script>
    <script src="/businessProcessManager/js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="/businessProcessManager/js/date.js"></script>
    <style>
        .v-modal {
            background: content-box;
        }
    </style>
</head>
<body>
<div class="content" id="js-drop-zone">

    <!--<div class="message intro">
        <div class="note">
            <a id="js-create-diagram" href>create a new diagram</a> to get started.
          </div>
    </div>-->

    <div class="message error">
        <div class="note">
            <p>Ooops, we could not display the BPMN 2.0 diagram.</p>

            <div class="details">
                <span>cause of the problem</span>
                <pre></pre>
            </div>
        </div>
    </div>

    <div class="canvas" id="js-canvas">
    </div>

    <div id="js-properties-panel">
        <div class="bpp-properties-header">
            <div id="tree">
                <div style="margin-bottom: 5px"><span style="font-size: 120%;font-weight: bold">流程所属组织机构</span></div>
                <el-input placeholder="请输入内容" v-model="organization" class="input-with-select" disabled>
                    <el-button slot="append" icon="el-icon-search" @click="dutyDialog=true;">选择</el-button>
                </el-input>
                <div style="margin-bottom: 5px"><span style="font-size: 120%;font-weight: bold">流程类型</span></div>
                <!--流程类型-->
                <el-select v-model="processType" placeholder="请选择" @change="setProcessType">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <!--组织机构数-->
                <el-dialog :fullscreen="false" title="选择组织机构" :visible.sync="dutyDialog">
                    <el-tree
                            :data="treeDatas"
                            node-key="id"
                            ref="tree"
                            highlight-current lazy
                            :expand-on-click-node="false"
                            :load="treeLoadNode"
                            @node-click="selected"
                            :props="treeProps">
                    </el-tree>
                </el-dialog>
            </div>
        </div>
    </div>
</div>

<ul class="buttons">
    <li><a id="js-download-diagram" href title="下载BPMN图表"> BPMN图表 </a></li>
    <li><a id="js-download-svg" href title="下载SVG图片"> SVG图片 </a></li>
    <li><a id="btn_deploy" href title="部署流程图" class="active"> 部  署 </a></li>
</ul>

<script src="extend.js" charset="utf-8"></script>
<script src="index.js" charset="utf-8"></script>
<!--引入url配置文件-->
<script src="/businessProcessManager/js/config.js"></script>
<script>
    var organization;
    var processType;
    //树形
    var tree = new Vue({
        el: '#tree',
        data: {
            dutyDialog: false,
            treeDatas: [],
            treeProps: {
                label: 'organizationName',
                children: 'zones'
            },
            organization: "",
            options: [{
                value: '1',
                label: '发文流程'
            }, {
                value: '2',
                label: '收文流程'
            }],
            processType: ''
        },
        created: function () {
            this.queryOrgAndType();
        },
        methods: {
            treeLoadNode: function (node, resolve) {  //树加载
                const that = this;
                that.$http.get("http://192.168.3.71:22003/organization/getTree",
                    {'pid': node.data.organizationCode}).then(function (data) {
                    if (showError(data, that)) {
                        resolve(data.data.data);
                    }
                });
            },
            dutyDialogOpen() {
                this.dutyDialog = true;
            },
            selected: function (val) {
                this.organization = val.organizationName;
                organization = val.organizationCode;
                this.dutyDialog = false;
            },
            setProcessType: function (val) {
                console.info(val);
                processType = val;
            },
            queryOrgAndType: function () {
                /*var processDefinitionId=parent.processDefinitionId;
                var modelId=parent.modelId;*/
                var modelId = getQueryString("modelId");
                var processDefinitionId = getQueryString("processDefinitionId");
                if (processDefinitionId == null || processDefinitionId == "") {
                    processDefinitionId = getQueryString("processDefinitionId");
                }
                if (modelId == null || modelId == "") {
                    modelId = getQueryString("modelId");
                }
                if (processDefinitionId != null && processDefinitionId != "undefined") {
                    this.$http.get(url + port + "repository/process-definitions/" + processDefinitionId).then(function (data) {
                        var category = data.data.category;
                        tree.organization = category.split("-")[0];
                        tree.processType = category.split("-")[1];
                        organization = category.split("-")[0];
                    }, function (response) {
                        console.info(response);
                    })
                } else if (modelId != null && modelId != "") {
                    this.$http.get(url + port + "repository/models/" + modelId).then(function (data) {
                        var category = data.data.category;
                        tree.organization = category.split("-")[0];
                        tree.processType = category.split("-")[1];
                        organization = category.split("-")[0];
                    }, function (response) {
                        console.info(response);
                    })
                }
            }
        }
    });

    function showError(data, that) {
        if (data.data.code != '200') {
            that.$message({
                message: data.data.msg,
                type: 'warning'
            });
            return null;
        } else {
            return data;
        }
    }
</script>
</body>
</html>
